


function anim(canvas, fps, clear) // класс анимации
{
    var context = canvas.getContext("2d");
    var interval = null;
    var update = null;
    var draw = null;





    this.update = function(func) {
        update = func;
    };

    this.draw = function(func) {
        draw = func;
    };

    var step = function() {
        if (clear) {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
        if (update !== null) {
            update();
        }
        if (draw !== null) {
            draw();
        }
    };

    this.stop = function() {
        clearInterval(interval);
    };

    this.play = function() {
        if (draw !== null) {
            draw();
        }
        interval = setInterval(step, 1000 / fps);
    };
}



function circle(x, y, r) // класс задающий круг
{
    this.x = x; // координата х
    this.y = y; // координата у
    this.r = r; // радиус

    // Hero image
    var heroReady = false;
    var heroImage = new Image();
    //heroImage.onload = function () {
    //    heroReady = true;
    //};
    heroImage.src = "images/hero.png";


    this.draw = function(context, color, globalAlpha) // метод рисующий круг
    {
        context.globalAlpha = globalAlpha; // "прозрачность"
        context.fillStyle = color; // цвет заливки
        context.beginPath();
        //context.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);

        context.drawImage(heroImage, x, y);

        context.fill();
    };
}

function rect(x, y, width, height) // класс прямоугольника
{
    this.x = x; // координата х
    this.y = y; // координата у
    this.width = width; // ширина
    this.height = height; // высота
    // функция рисует прямоугольник согласно заданным параметрам
    this.draw = function(context, color, globalAlpha) {
        context.globalAlpha = globalAlpha;
        context.fillStyle = color;
        context.fillRect(this.x, this.y, this.width, this.height);
    };
}

function init() // инициализация
{
    var screen = new rect(0, 0, 480, 320);
    var ball = new circle(240, 160, 25);
    var vX = 5;
    var vY = 5;
    var canvas = document.getElementById("example");
    canvas.width = screen.width;
    canvas.height = screen.height;
    var context = canvas.getContext("2d");
    var game = new anim(canvas, 50, false);
    game.draw(function() {
        screen.draw(context, "#000", 0.5);
        ball.draw(context, "#f00", 1);
    });
    game.update(function() {
        if (ball.y - ball.r < 0 || ball.y + ball.r > 320) // соприкосновение с "полом" и "потолком" холста
        {
            vY = -vY;
        }
        if (ball.x - ball.r < 0 || ball.x + ball.r > 480) // соприкосновение с левой и правой "стенкой" холста 
        {
            vX = -vX;
        }
        // приращение координат
        ball.x += vX;
        ball.y += vY;
    });
    screen.draw(context, "#000", 1);
    ball.draw(context, "#f00", 1);
    var click = false;
    // по шелчку мыши останавливаем обновление холста,
    // если холст остановлен продолжаем анимацию
    canvas.onclick = function() {
        if (!click) {
            click = true;
            game.play();
        } else {
            click = false;
            game.stop();
        }
    };
}

init();